<template>
  <div :style="formStyle">
    <div v-if="element.subtype==='input'||element.subtype==='textarea'">
      <div :class="{placeholder: !form.value}">{{inputValue}}</div>
      <span>{{form.ruleMessage}}</span>
    </div>
    <div v-if="element.subtype==='button'">
      <button style="width: 100%;">{{form.value}}</button>
    </div>
    <div v-if="element.subtype==='select'">
      <div class="select" :class="{placeholder: !form.value}">{{selectValue}}</div>
    </div>
    <div v-if="element.subtype==='radio'">
      <div v-for="option in form.options" :class="[{active: form.value && form.value === option.value}, 'radio']"><i></i>{{option.label}}</div>
    </div>
    <div v-if="element.subtype==='checkbox'">
      <div v-for="option in form.options" :class="[{active: form.value && form.value.indexOf(option.value) > -1}, 'checkbox']"><i></i>{{option.label}}</div>
    </div>
  </div>

</template>

<script>
import { Vue, Component, Prop, Watch} from 'vue-property-decorator'
import findIndex from 'lodash/findIndex'
interface Form {
  value: any;
  options:any[];
  fontSize:number;
  color:string;
  placeholder:string;
}
@Component
export default class ElementForm extends Vue {
  @Prop(Object) element:any

  get form ():Form {
    return {...this.element.extra}
  }
  get formStyle () {
    return {
      fontSize: this.form.fontSize + "px",
      color: this.form.color,
    
    }
  }
  get inputValue () {
    return this.form.value || this.form.placeholder
  }

  get selectValue () {
    let value = this.form.value
    const index = findIndex(this.form.options, o => this.form.value && o.value === this.form.value)
    if (index > -1) {
      value = this.form.options[index].label
    } else {
      value = this.form.value
    }
    return value || this.form.placeholder
  }

  mounted () {
  }
}
</script>
<style lang="less" scoped>
  .select {
    position: relative;
    padding-right: 1.2em;
    height: 24px;
    border: 1px solid #ccc;
    &:after {
      position: absolute;
      content: '';
      border-width: 0.5em;
      border-style: solid;
      border-color: #ccc transparent transparent transparent;
      right: 0;
      top: 50%;
      margin-top: -0.25em;
    }
  }
  .checkbox, .radio {
    font-family: "iconfont";
    color: red;
}

.checkbox i:after{
   content: "\ead5";
}
.checkbox.active i:after {
    content: "\e637";
}

.radio i:after {
    content: "\e62b";
}
.radio.active i:after {
    content: "\e75f";
}
 
  .placeholder {
    color: #ccc;
  }
</style>
